<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>个人注册</title>
    <meta content="yes" name="apple-mobile-web-app-capable"><!--可隐藏地址栏，仅针对IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果）-->
    <meta content="yes" name="apple-touch-fullscreen"><!--添加到主屏幕后，全屏显示-->
    <meta content="telephone=no,email=no" name="format-detection"><!--IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别-->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /><!--避免IE使用兼容模式-->
    <meta content="black" name="apple-mobile-web-app-status-bar-style"><!--仅针对IOS的Safari顶端状态条的样式（可选default/black/black-translucent ）-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../css/base.css"/>
    <link rel="stylesheet" href="../lib/swiper/css/swiper.min.css">
    <link rel="stylesheet" href="../css/index.css"/>
</head>
<body style="background-color: #ffffff">
<div class="rigister">
    <div class="phone">
        <p>注册手机号</p>
        <ul>
            <li>
                <label for="phonenumber">手机号：</label>
                <input type="text" id="phonenumber" name="phonenumber">
            </li>
            <li>
                <label for="code">验证码：</label>
                <input type="text" id="code" name="code">
                <button>获取验证码</button>
            </li>
        </ul>
    </div>
    <div class="label">
        <div class="label-header">
            <p>至少选择3个感兴趣的内容</p>
            <div class="change" id="change">
                <img src="../images/mine/change.png" alt="">
                <span>换一组</span>
            </div>
        </div>
        <section class="swiper-container">
            <div class="swiper-wrapper">
                <ul class="swiper-slide">
                    <li data-id="0"><span>新闻</span></li>
                    <li data-id="1"><span>汽车</span></li>
                    <li data-id="2"><span>学习</span></li>
                    <li data-id="3"><span>游戏</span></li>
                    <li data-id="4"><span>电商</span></li>
                    <li data-id="5"><span>科技数码</span></li>
                    <li data-id="6"><span>时尚穿搭</span></li>
                    <li data-id="7"><span>护肤</span></li>
                    <li data-id="8"><span>阅读</span></li>
                </ul>
                <ul class="swiper-slide">
                    <li data-id="9"><span>美食</span></li>
                    <li data-id="10"><span>美妆</span></li>
                    <li data-id="11"><span>旅行</span></li>
                    <li data-id="12"><span>运动健身</span></li>
                    <li data-id="13"><span>体育</span></li>
                    <li data-id="14"><span>娱乐</span></li>
                    <li data-id="15"><span>婚姻</span></li>
                    <li data-id="16"><span>单身</span></li>
                    <li data-id="17"><span>小说</span></li>
                </ul>
                <ul class="swiper-slide">
                    <li data-id="9"><span>健康</span></li>
                    <li data-id="10"><span>购物</span></li>
                    <li data-id="11"><span>美食</span></li>
                    <li data-id="12"><span>股票</span></li>
                    <li data-id="13"><span>房产</span></li>
                    <li data-id="14"><span>明星</span></li>
                    <li data-id="15"><span>军事</span></li>
                    <li data-id="16"><span>历史</span></li>
                    <li data-id="17"><span>住宿</span></li>
                </ul>
                <ul class="swiper-slide">
                    <li data-id="9"><span>外卖</span></li>
                    <li data-id="10"><span>电影</span></li>
                    <li data-id="11"><span>医疗</span></li>
                    <li data-id="12"><span>彩票</span></li>
                    <li data-id="13"><span>花呗</span></li>
                    <li data-id="14"><span>金融</span></li>
                    <li data-id="15"><span>信用卡</span></li>
                    <li data-id="16"><span>理财</span></li>
                    <li data-id="17"><span>视频</span></li>
                </ul>
            </div>
        </section>
    </div>
    <div class="btn-submit">
        <button id="submit">提交</button>
    </div>
</div>
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/swiper/js/swiper.jquery.min.js"></script>
<script>
    $(function () {
        var swiper = new Swiper('.swiper-container', {
            autoplay: false,//可选选项，自动滑动
            loop: false,
            autoplayDisableOnInteraction: true,//滑动以后是否禁止autoplay
        });
        $('#change').on('click',function () {
            swiper.slideNext();
        });
        $('#phonenumber').blur(function () {
            var phoneInput = $(this).val();
            isPhoneNumber(phoneInput);
        });
        //模拟数据
        var data = [false,false,false,false,false,false,false,false,false,false,false,false];
        $('.swiper-slide li').on('click',function () {
            var id = $(this).attr('data-id');
            data[id] = !data[id];
            if(data[id] == true) {
                $(this).children('span').addClass('active');
            } else {
                $(this).children('span').removeClass('active');
            }
        });
        var phoneInput = $('#phonenumber').val();
        $('#submit').on('click',function () {
            $.ajax({
                url: '',
                type: '',
                data: {phoneInput: phoneInput,data: data},
                dataType: 'json',
                beforeSend: function () {
                    isPhoneNumber(phoneInput);
                },
                success: function () {

                }
            });
        });
    });
    function isPhoneNumber(phoneInput) {
        var mobile = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if(phoneInput == '' || !mobile.test(phoneInput)) {
            alert('请输入正确的手机号！');
            return false;
        } else {
            return true;
        }
    }
</script>
</body>
</html>